<template>
    <div class="photoinfo-container">
        <h3>{{photoinfo.title}}</h3>
          <p class="subtitle">
             <span>发布时间：{{photoinfo.add_time | dataFormat }}</span>
             <span>点击：{{photoinfo.click}}</span>
          </p>
          <hr>
          <!-- 缩略图区域 -->
          <div class="thumbs">
             <vue-preview  :slides="thubmslist" @close="handleClose" ></vue-preview>
          </div>
        
          <!-- 内容区域 -->
          <div class="content" v-html="photoinfo.content"></div>
          <!-- 放置评论子组件 -->
          <cmt-box :id="id"></cmt-box>
    </div>
</template>

<script>
import {Toast} from  'mint-ui'
import comment from '../subcomponent/comment.vue'

export default {
    data(){
        return{
            id:this.$route.params.id,
            photoinfo:{},
            thubmslist:[]
        }
    },
    created(){
        this.getPhotoInfo();
        this.getThumbs()
    },
    methods:{
        getPhotoInfo(){
          this.$http.get('api/getimageInfo/'+this.id).then(
              result =>{
                  if(result.body.status ==0){
                    this.photoinfo = result.body.message[0]
                  }
                  else{
                      Toast("加载图片详情失败..")
                  }
              }
          )
        },
        getThumbs(){
            this.$http.get('api/getthumimages/'+this.id).then(
                result =>{
                    if(result.body.status == 0){
                        result.body.message.forEach(item =>{
                            item.w = 600;
                            item.h = 400;
                            item.msrc = item.src;
                        })
                        this.thubmslist = result.body.message    
                    }
                    else{

                    }
                }
            )
       },
       handleClose () {
        console.log('close event')
      }
    },
    components:{
        "cmt-box":comment
    }

}
</script>

<style lang="scss" scoped>
.photoinfo-container{
    padding:5px;
}

.photoinfo-container h3{
    color:blue;
    font-size: 16px;
    text-align: center;
    margin:15px 0;
}

.photoinfo-container .subtitle{
   display: flex;
   justify-content: space-between;
   font-size: 13px;
}
.photoinfo-container .content{
    font-size:14px;
    line-height: 30px;
}

</style>